<template>
  <div class='userransomstakinglist'>

      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;padding-bottom: 0px;
    display: flex;justify-content: space-between">

      <el-form :inline="true" :model="userstakinghistorylistmsg">
        <el-form-item>
          <el-input
            v-model="userstakinghistorylistmsg.uid"
            :placeholder="$t('iptdefault.username')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('iptdefault.timeselect')">
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.starttime')"
              v-model="userstakinghistorylistmsg.start"
              style="width: 100%"
            ></el-date-picker>
          </el-col>

          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.endtime')"
              v-model="userstakinghistorylistmsg.end"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" v-on:click="getuserShlist">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getuserShlistRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" style="display:flex;align-item:center;">   
         <el-form-item>
          <el-button type="primary" @click="exportexcel">{{$t('publicbtn.exportalldata')}}</el-button>
        </el-form-item> 
       <excelexport></excelexport>
      </el-form>
    </el-col>

    <!-- 列表 -->
 <el-table
      v-loading="loading"
      :data="userstakinghistorylist"
      style="width: 100%"
      id="out-table">
    <el-table-column prop="userId" :label="$t('field.userid')" width="230" fixed="left"></el-table-column>
    <el-table-column prop="name" :label="$t('field.upusername')" width="230"  fixed="left"></el-table-column>
    <el-table-column prop="username" :label="$t('field.cellphones')" width="230"  fixed="left"></el-table-column>
    <el-table-column prop="orderId" :label="$t('userInterestList.planID')" width="230"  fixed="left"></el-table-column>
    
    <el-table-column prop="crypto" :label="$t('userstakinghistorylist.currency')" width="230"  fixed="left"></el-table-column>
    
    <el-table-column prop="type" :label="$t('field.type')"  width="230">
         <template slot-scope="props">
          {{
            props.row.type == 1 ? $t('field.current'): props.row.type == 2 ?$t('field.regular')+'('+ props.row.lockDay+$t('field.day')+')':''
          }}
        </template>
    
    </el-table-column>
    <el-table-column prop="cycle" :label="$t('field.poayoutperio')" width="230"></el-table-column>

    <el-table-column prop="rate" :label="$t('field.interest')" width="230">
        <template slot-scope="props">
          {{
            (props.row.rate * 100).toFixed(1) +'%'
          }}
        </template>
    </el-table-column>
    <el-table-column prop="createdAt" :label="$t('field.dateofapplication')" width="230"></el-table-column> 
    <el-table-column prop="endDate"  :label="$t('field.redemptiontime')" width="230">
         <template slot-scope="props">
          {{
            props.row.endDate | formatDate
          }}
        </template>
    </el-table-column>
    <el-table-column prop="num"  :label="$t('field.pledged')" width="230">
         <template slot-scope="props">
          {{
          (Math.abs( props.row.num)  / million).toFixed(8)
          }}
        </template>

    </el-table-column>

    <el-table-column prop="interestTotal" :label="$t('userstakinghistorylist.interest')" width="230">
            <template slot-scope="props">
          {{
          (Math.abs( props.row.interestTotal)  / million).toFixed(8)
          }}
        </template></el-table-column> 


</el-table>

     <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userstakinghistorylisttotal"
        :page-size="userstakinghistorylistmsg.size"
        @current-change="current_changes"
        :current-page="userstakinghistorylistmsg.page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

import excelexport from '@/components/export.vue'
import exportData from "@/components/export.js";
import {postUserRequest, getUserRequest,getNudataRequest } from "@/api/api";
export default {
  name :'userstakinglist',
  components:{
   excelexport
  },
  data() {
    return {
    loading:true,
    userstakinghistorylisttotal:null,
    userstakinghistorylist:[],
    userstakinghistorylistmsg:{
      uid:'',
      page:1,
      size:10,
      start:'',
      end:''
    }
    };
  },
  computed: {},
  watch: {},
  methods: {
userStakingHistoryList(){
    this.loading =true 
    var userStakingHistoryListMsgCopy = JSON.parse(JSON.stringify(this.userstakinghistorylistmsg))
  if(userStakingHistoryListMsgCopy.start) userStakingHistoryListMsgCopy.start = new Date(userStakingHistoryListMsgCopy.start).getTime()
  if(userStakingHistoryListMsgCopy.end) userStakingHistoryListMsgCopy.end = new Date(userStakingHistoryListMsgCopy.end).getTime()
getUserRequest(userStakingHistoryListMsgCopy,'/staking/userStakingHistoryList').then(res=>{
    const data = res.data
    if(data.code == 200){
        this.userstakinghistorylist = data.data.list
        this.userstakinghistorylisttotal = data.data.total
    }else{
    this.$message({
        message: data.message,
        type: "error"
    })
    }
    this.loading = false 
})
},


// 查询
getuserShlist(){
    this.userstakinghistorylistmsg.page = 1;
    this.userStakingHistoryList();
},
// 刷新
getuserShlistRefresh(){
       this.userstakinghistorylistmsg.page = 1;
    this.userStakingHistoryList(); 
  },
//  分页
current_changes(pager) {
    this.userstakinghistorylistmsg.page = pager;
    this.userStakingHistoryList();
  },
          
   // 导出全部数据 
  exportexcel(){
  let tableDatatilte = ['userId','name','username','orderId','crypto','type','cycle','rate','createdAt','endDate','num','interestTotal']
  let tableData = [[ this.$t('field.userid'),this.$t('field.upusername'),this.$t('field.cellphones'),this.$t('userInterestList.planID'),this.$t('userstakinghistorylist.currency'),this.$t('field.type'),this.$t('field.poayoutperio'),this.$t('field.interest'),this.$t('field.dateofapplication'),this.$t('field.redemptiontime'),this.$t('field.pledged'),this.$t('userstakinghistorylist.interest')]]
  
  let datamsg = {start:'',end:'',uid:this.userstakinghistorylistmsg.uid,size:this.million,page:1 }
  datamsg.start = JSON.parse(JSON.stringify(this.userstakinghistorylistmsg.start))
  datamsg.end = JSON.parse(JSON.stringify(this.userstakinghistorylistmsg.end))
  if(datamsg.start &&datamsg.end){
        if(datamsg.start !='') datamsg.start = (new Date(datamsg.start)).getTime();
        if(datamsg.end !='') datamsg.end = (new Date(datamsg.end)).getTime();
         getUserRequest(datamsg,'/staking/userStakingHistoryList').then(res=>{
        var datalist = res.data.data.list
        for(let i = 0;i < datalist.length; i++){

            if(datalist[i].type ==1) {
              datalist[i].type = this.$t('field.current')
            }else if(datalist[i].type ==2){
              datalist[i].type =  this.$t('field.regular')+'('+datalist[i].lockDay+this.$t('field.day')+')'
            }
              datalist[i].rate = (datalist[i].rate * 100 ).toFixed(1)+ '%' 
              if(datalist[i].endDate){
                datalist[i].endDate = this.moment(datalist[i].endDate).format("YYYY-MM-DD HH:mm:ss")
              }else{
                datalist[i].endDate = '-'
              }
              datalist[i].num =  (Math.abs(datalist[i].num) / this.million).toFixed(8)
              datalist[i].interestTotal =  (Math.abs(datalist[i].interestTotal) / this.million).toFixed(8)

         
        }
        let exportName = this.$t('export.userstakinghistorylist')
        exportData.exportTable(datalist,tableData,tableDatatilte,exportName)
           
         })
  }else{
      this.$message({
        message:this.$t('bulletframe.selecttime'),
        type: "error",
      });
    }
  }
  },
  created() {

  },
  mounted() {
this.userStakingHistoryList()
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>